<template>
	<view class="distri-manage">
		<NavBar title="配送管理"/>
		<view class="content">
			<view class="distri-item" v-if="shipmentsList.length" v-for="(item, index) in shipmentsList" :key="item">
				<view class="distri-name">
					<view class="num-name">
						<view class="num"> {{(index+1)<=9?'0'+(index+1):(index+1)}} </view>
						<view class="name"> {{item.shipments_name}} </view>
					</view>
					<view class="distri-status"> {{item.status == 1? '开启':'关闭'}} </view>
				</view>
				<view class="payment" v-if="item.shipments == 1">
					<view class="baoyou"> 满额配送：{{item.satisfy_song_switch == 1? '开启':'关闭'}} </view>
					<view class="peisong" v-if="item.satisfy_song_switch == 1"> 满额配送：满 {{item.satisfy_song}} 起送 </view>
				</view>
				<view class="payment" v-if="item.shipments == 2">
					<view class="baoyou"> 自提时间：{{item.pick_time}} </view>
				</view>
				<view class="payment" v-if="item.shipments == 3">
					<view class="baoyou"> 满额包邮：{{item.satisfy_mian_switch == 1? '开启':'关闭'}} </view>
					<view class="peisong" v-if="item.satisfy_mian_switch == 1"> 满额包邮：满 {{item.satisfy_song}} 包邮 </view>
				</view>
				<view class="region-price" v-if="item.shipments != 2"> 区域及价格：5公里以内3元每超出1公里加收1元</view>
				<view class="distri-btn">
					<view class="btn" @tap="del(item.id, index)"> 删除 </view>
					<view class="btn" @tap="edit(item)"> 编辑 </view>
				</view>
			</view>
			<Empty txt="暂未添加配送方式~" v-else/>
			<view class="btn-box">
				<view class="btn" @tap="addDistriType"> 添加配送方式 </view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import Empty from '@/components/Empty.vue'
	import { useUserStore } from '@/store/index.js'
	import { GetShopShipmentsApi, DelShipmentsApi } from '@/service/shop.js'
	const shipmentsList = ref([])
	const getShipmentsList = () => {
		const { userInfo } = useUserStore()
		GetShopShipmentsApi({shop_id: userInfo.shop_id}).then(res => {
			shipmentsList.value = res
		})
	}
	const del = (id, index) => {
		DelShipmentsApi({id}).then(res => {
			shipmentsList.value.splice(index, 1)
			getApp().globalData.toast('删除成功')
		})
	}
	const edit = (info) => {
		uni.navigateTo({
			url: `/pages/shopPages/distributionManage/addDistribution?info=${JSON.stringify(info)}`
		})
	}
	const addDistriType = () => {
		uni.navigateTo({
			url: '/pages/shopPages/distributionManage/addDistribution'
		})
	}
	onShow(() => {
		getShipmentsList()
	})
</script>

<style scoped lang="scss">
	.distri-manage {
		.content {
			padding: 10px 12px;
		}
		.distri-item {
			padding: 0 12px 10px;
			border-radius: 10px;
			margin-bottom: 10px;
			background-color: #fff;
			.distri-name {
				height: 44px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #EEEEEE;
				.num-name {
					display: flex;
					align-items: center;
					.num {
						color: #999999;
						font-size: 16px;
						font-weight: 500;
						margin-right: 10px;
					}
					.name {
						color: #333333;
						font-size: 16px;
						font-weight: 500;
					}
				}
				.distri-status {
					color: #FF3B1E;
					font-size: 14px;
					font-weight: 400;
				}
			}
			.payment, .region-price {
				margin: 9px 0 6px;
				color: #666666;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.baoyou, .peisong {
					flex: 1;
				}
			}
			.region-price {
				margin: 0;
			}
			.distri-btn {
				margin-top: 10px;
				display: flex;
				align-items: center;
				justify-content: end;
				.btn {
					width: 56px;
					height: 22px;
					color: #333333;
					font-size: 12px;
					font-weight: 400;
					margin-left: 10px;
					background: #FFFFFF;
					border-radius: 151px;
					border: 1px solid #999999;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.btn-box {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #f4f5f7;
			padding: 0 12px 10px;
			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 50px;
				color: #FFFFFF;
				font-size: 17px;
				font-weight: 500;
				background: #FF3B1E;
				border-radius: 106px 106px 106px 106px;
			}
		}
	}
</style>
